<template>
  <div class="login-container">

  <el-form :inline="true" :model="teacherQuery" class="demo-form-inline">
    <el-form-item>
      <el-input v-model="teacherQuery.name" placeholder="名称"></el-input>
    </el-form-item>
    <el-form-item>
      <el-select v-model="teacherQuery.level" clearable="true" placeholder="讲师头衔" >
        <el-option label="高级讲师" :value="1"></el-option>
        <el-option label="首席讲师" :value="2"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-date-picker type="date" placeholder="选择开始时间" v-model="teacherQuery.begin" style=""></el-date-picker>
      <el-date-picker type="date" placeholder="结束时间" v-model="teacherQuery.end" style=""></el-date-picker>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="getList()">查询</el-button>
      <el-button @click="resetForm()">清空</el-button>
    </el-form-item>
  </el-form>

    <el-table
    :data="list"
    border
    style="width: 100%">

    <el-table-column
    label="序号"
      type="index"
      width="50">
    </el-table-column>

    <el-table-column
      property="name"
      label="名称"
      width="80">
    </el-table-column>

    <el-table-column label="头衔" width="80">
      <template slot-scope="scope">
        {{scope.row.level=="1"?'高级讲师':'首席讲师'}}
      </template>
    </el-table-column>

    <el-table-column
      property="intro"
      label="资历">
    </el-table-column>

    <el-table-column
      property="gmtCreate"
      label="添加时间"
      width="160">
    </el-table-column>

    <el-table-column
      property="sort"
      label="排序"
      align="center"
      width="80">
    </el-table-column>

    <el-table-column label="操作" width="200" align="center">
      <template slot-scope="scope">
        <el-button type="primary" icon="el-icon-edit" circle @click="toEditTeacher(scope.row.id)"></el-button>
        <el-button type="danger" icon="el-icon-delete" circle @click="deleteTeacherId(scope.row.id)"></el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    :current-page="page"
    :page-size="size"
    :total="total"
    style="padding:30px 0; text-align:center;"
    layout="total,prev,pager,next,jumper"
    @current-change="getList"
  />
  </div>
</template>

<script>
import teacher from '@/api/edu/teacher'

export default {
  data(){
    return {
      list:[],
      page:0,
      size:7,
      total:0,
      teacherQuery:{}
    }
  },
  created(){
    this.getList()
  },
  methods:{
    getList(page=1){
      console.log(page)
      this.page=page
      teacher.getTeacherListPage(this.page,this.size,this.teacherQuery)
      .then(res=>{
        this.list=res.data.list
        this.total=res.data.total
      })
      .catch(err=>{
        console.log(err)
      })
    },
    resetForm(){
      //1.清空查询条件
      this.teacherQuery={}
      //2.执行查询
      this.getList()
    },

    //按id删除讲师
    deleteTeacherId(id){
      this.$confirm('此操作将永久删除该讲师记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        teacher.deleteTeacherId(id).then(res=>{
          this.$message({
          type: 'success',
          message: '删除成功!'
          });
          //重新查询
          this.getList()
        })        
      })
    },

    //编辑讲师信息
    toEditTeacher(id){
      this.$router.push({path:'/teacher/edit/'+id})
    }
  }

}
</script>